export const inputHighlightLimit = {
  onChange (e) {
    const val = e.target.value
    const limitDom = inputHighlightLimit.getLimitCountDom()
    const limitCount = inputHighlightLimit.getLimitCount()
    const nowCount = val.length
    if (nowCount === limitCount) {
      limitDom.style.color = 'red'
    } else {
      limitDom.style.color = '#909399'
    }
  },
  getLimitCount () {
    const dom = inputHighlightLimit.getLimitCountDom()
    return +dom.innerText.split('/')[1]
  },
  getLimitCountDom () {
    return inputHighlightLimit.el.querySelector('.el-input__count')
  },
  getInputDom () {
    return inputHighlightLimit.el.querySelector('textarea') || inputHighlightLimit.el.querySelector('input')
  },
  bind (el) {
    inputHighlightLimit.el = el
    const dom = el.querySelector('textarea') || el.querySelector('input')
    dom.addEventListener('input', inputHighlightLimit.onChange)
  },
  unbind (el) {
    const dom = el.querySelector('textarea') || el.querySelector('input')
    const limitDom = inputHighlightLimit.getLimitCountDom()
    limitDom.style.color = '#909399'
    dom.addEventListener('input', inputHighlightLimit.onChange)
  }
}
